#{extends 'main.html' /}
#{set title:'Home' /}

<link href="@{'/public/css/main.css'}" rel="stylesheet" type="text/css" />
<link href="@{'/public/css/tables.css'}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/ui-lightness/jquery-ui-1.7.2.custom.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.ui.timepicker.css'}" />

#{if flash.error}
    <p style="color:#c00">
        ${flash.error}
    </p>
#{/if}

#{script 'jquery-ui-1.7.2.custom.min.js' /}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript"></script>
<script src="@{'/public/javascripts/jquery.ui.timepicker.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.widget.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.core.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.position.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.tabs.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>


<script type="text/javascript">
	$(function() {
		$( "#datep" ).datepicker();
		$('#timepicker').timepicker({
		    // Options
		    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
		    showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10.
		                                    // (default: true)
		    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
		                                   //  (default: true)
		    showPeriod: false,            // Define whether or not to show AM/PM with selected time. (default: false)
		    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
		    periodSeparator: ' ',         // The character to use to separate the time from the time period.
		    altField: '#alternate_input', // Define an alternate input to parse selected time to
		    defaultTime: '12:00',         // Used as default time when input field is empty or for inline timePicker
		                                  // (set to 'now' for the current time, '' for no highlighted time,
		                                   //  default value: now)

		    // trigger options
		    showOn: 'focus',              // Define when the timepicker is shown.
		                                  // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
		                                  // 'both': when the input gets focus and when the button is clicked.
		    button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

		    // Localization
		    hourText: 'Hour',             // Define the locale text for "Hours"
		    minuteText: 'Minute',         // Define the locale text for "Minute"

		    // Position
		    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
		    atPosition: 'left bottom',    // Corner of the input to position

		 /*    // Events
		    beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
		    onSelect: onSelectCallback,   // Define a callback function when an hour / minutes is selected.
		    onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
		    onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
		    onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)
		 */
		    // custom hours and minutes
		    hours: {
		        starts: 0,                // First displayed hour
		        ends: 23                  // Last displayed hour
		    },
		    minutes: {
		        starts: 0,                // First displayed minute
		        ends: 55,                 // Last displayed minute
		        interval: 5               // Interval of displayed minutes
		    },
		    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
		    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
		    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

		    // buttons
		    showCloseButton: false,       // shows an OK button to confirm the edit
		    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
		    showNowButton: false,         // Shows the 'now' button
		    nowButtonText: 'Now',         // Text for the now button
		    showDeselectButton: false,    // Shows the deselect time button
		    deselectButtonText: 'Deselect' // Text for the deselect button
		});
	});	
	
	function changetextbox() {
	    var selMenu = document.getElementById('regularity');
	    var txtField1 = document.getElementById('datep');
	    var txtField2 = document.getElementById('timepicker');
	    if(selMenu.value == '2'){
	        txtField1.disabled = true
	        txtField2.disabled = true
	    }
	    
	    else {
	    	txtField1.disabled = false
	        txtField2.disabled = false
	    } 
	}
</script>
#{/set}

<form action="@{Rides.searchResults()}" method="GET">
	<h2>Search:</h2>

	<table style="width: 95%;">
		<tr>
			<td><label>Start point: </label></td>
			<td><input name="startPoint"></td>
		</tr>
		<tr>
			<td><label>Destination campus:</label></td>
			<td><input name="destinationCampusId"></td>
		</tr>
		<tr>
			<td><label>Regularity:</label></td>
			<td>
				<select name="regularity" id="regularity" onChange="changetextbox()">
		            <option value="0">One time</option>
		            <option value="1">Multiple times</option>
		            <option value="2">Weekly</option>
	            </select>
           	</td>
			<td><label>(Weekly automatically includes your timetable!)</label></td>
		</tr>
		<tr>
			<td><label>Date:</label></td>
			<td><input type="text" style="text-align: center;" name="datep" id="datep" class="datepicker"></td>
		</tr>
		<tr>
			<td><label>Time:</label></td>
			<td><input type="text" size="20" style="text-align: center;" name ="timepicker" id="timepicker" class="timepicker" value=""></td>
		</tr>
	</table>
	<br>
	<input type="submit" style="width:80px;" name="search" value="Search" />
</form> 
